<template>
  <a-card :bordered="false">
    <s-table ref="table" size="default" :ableExport="false" rowKey="ID" :columns="columns" :data="loadData">
      <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
      <div slot="action" slot-scope="text, record, index">
        <a-popover :value="record.visible" title="查看信息" placement="left" trigger="click" arrow-point-at-center>
          <div slot="content" style="width: 800px">
            <a-spin :spinning="spinning">
              <a-table
                :scroll="{ x: true, y: 0 }"
                :showPagination="false"
                ref="detailTable"
                size="small"
                :rowKey="(record, index) => index"
                :columns="columnsDetail"
                :data-source="loadDetailData"
                :pagination="false"
              >
              </a-table>
            </a-spin>
          </div>
          <y-button type="link" @click="handleDetail(record.ID, index)">查看</y-button>
        </a-popover>
      </div>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getSysModifyLog, getSysModifyDetailLog } from '@/api/common'
export default {
  components: {
    STable,
  },
  props: {
    proposerID: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '修改时间',
          align: 'center',
          dataIndex: 'ModifyDate',
        },
        {
          title: '阶段',
          align: 'center',
          dataIndex: 'Stage',
        },
        {
          title: '执行人',
          align: 'center',
          dataIndex: 'UserName',
        },
        {
          title: '执行部门',
          align: 'center',
          dataIndex: 'DepName',
        },
        {
          title: '方式',
          align: 'center',
          dataIndex: 'ModifyType',
        },
        {
          title: '操作',
          align: 'center',
          width: '160px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return getSysModifyLog({
          applyID: this.$route.params.id || this.proposerID,
          ...parameter,
        }).then((res) => res)
      },
      columnsDetail: [
        {
          title: '影响字段',
          fixed: 'left',
          align: 'center',
          width: 100,
          dataIndex: 'yxzd',
        },
        {
          title: '市级审核时间',
          align: 'center',
          dataIndex: 'sjshsj',
        },
        {
          title: '市级审核人',
          align: 'center',
          dataIndex: 'sjshr',
        },
        {
          title: '补贴人数',
          align: 'center',
          dataIndex: 'btrs',
        },
      ],
      loadDetailData: [
        {
          yxzd: '更改前',
          sjshsj: '',
          sjshr: '',
          btrs: '1',
        },
        {
          yxzd: '更改后',
          sjshsj: '2022-8-23 10:07:12',
          sjshr: '张三',
          btrs: '2',
        },
      ],
      spinning: false,
    }
  },
  methods: {
    handleDetail(id, index) {
      this.spinning = true
      this.columnsDetail = [
        {
          title: '影响字段',
          fixed: 'left',
          align: 'center',
          width: 100,
          dataIndex: 'yxzd',
        },
      ]
      this.loadDetailData = [
        {
          yxzd: '更改前',
        },
        {
          yxzd: '更改后',
        },
      ]
      this.$refs.table.localDataSource[index].visible = true
      getSysModifyDetailLog({
        pageSize: 999,
        pageIndex: 1,
        sysModifyLogID: id,
      })
        .then((res) => {
          const { data } = res
          data.forEach((element) => {
            this.columnsDetail.push({
              title: element.PropDescription,
              align: 'center',
              dataIndex: element.PropName,
            })
            this.loadDetailData[0][element.PropName] = element.OldValue
            this.loadDetailData[1][element.PropName] = element.NewValue
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-scroll td {
  white-space: nowrap;
}
</style>
